<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>节点和节点之间的关键属性</title>
     <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
    <ul>
        <li>张三</li>
        <li>lisi</li>
        我是文本节点不是元素节点
        <!-- 我是注释节点也不是元素节点 -->
        <li class="ww">王五</li>
        <li>赵六</li>
    </ul>
     <pre>
        <code style='max-height: 400px;'>
            // 节点和节点之间的关键属性
        // 节点？ ==> 页面中所有的出现的dom都是结点
        // 元素节点 （元素标签）
        /**
         * nodeType : 1
         * nodeName:大写标签名
         * nodeValue null
        */
        // 文本节点
        /**
         * nodeType:3
         * nodeName:#text
         * nodeValue 当前文本内容
         * */ 
        // 注释节点
        /**
         * nodeType 8
         * nodeName:#commen
         * nodeValue: 注释内容
         * 
        */
        // 文档节点 document
        /**
         * nodeType : 9
         * nodeName:#document
         * nodeValue:Null
         * 
        */
        // .......

        // childNodes 获取所有子节点
        // parent 获取父节点
        // children : 获取所有的子元素标签
        // firstChild 获取第一个子节点
        // lastChild 获取最后一个子节点
        // lastElementChild / firstElementChild 获取第一个和最后一个元素子节点 (不兼容ie)

        // previousSibling  获取上一个哥哥节点
        // nextSibling 获取下一个弟弟节点
        // previousElementSibling / nextElementSibling : 获取哥哥和弟弟元素节点(不兼容ie6~8)

        let ww = document.querySelector('.ww')
        // 获取上一个兄弟节点
        function prev(context){
            let pre = context.previousSibling
            console.log(pre);
            while(pre.nodeType !== 1){
                // console.log('我还要寻找');
                console.log('中间寻找的节点的内容',pre.nodeValue);
                pre = pre.previousSibling
            }
            // nodeType == 3 是元素节点
            console.log('找到了我的上一个兄弟元素节点',pre,'内容是:',pre.innerText);
        }

        prev(ww)
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        // 节点和节点之间的关键属性
        // 节点？ ==> 页面中所有的出现的dom都是结点
        // 元素节点 （元素标签）
        /**
         * nodeType : 1
         * nodeName:大写标签名
         * nodeValue null
        */
        // 文本节点
        /**
         * nodeType:3
         * nodeName:#text
         * nodeValue 当前文本内容
         * */ 
        // 注释节点
        /**
         * nodeType 8
         * nodeName:#commen
         * nodeValue: 注释内容
         * 
        */
        // 文档节点 document
        /**
         * nodeType : 9
         * nodeName:#document
         * nodeValue:Null
         * 
        */
        // .......

        // childNodes 获取所有子节点
        // parent 获取父节点
        // children : 获取所有的子元素标签
        // firstChild 获取第一个子节点
        // lastChild 获取最后一个子节点
        // lastElementChild / firstElementChild 获取第一个和最后一个元素子节点 (不兼容ie)

        // previousSibling  获取上一个哥哥节点
        // nextSibling 获取下一个弟弟节点
        // previousElementSibling / nextElementSibling : 获取哥哥和弟弟元素节点(不兼容ie6~8)

        let ww = document.querySelector('.ww')
        // 获取上一个兄弟节点
        function prev(context){
            let pre = context.previousSibling
            console.log(pre);
            while(pre.nodeType !== 1){
                // console.log('我还要寻找');
                console.log('中间寻找的节点的内容',pre.nodeValue);
                pre = pre.previousSibling
            }
            // nodeType == 3 是元素节点
            console.log('找到了我的上一个兄弟元素节点',pre,'内容是:',pre.innerText);
        }

        prev(ww)
     </script>
</body>
</html>